<template>
  <div class="animate__fadeInUp animate__animated animate__faster">
    <div class="name wrap">
      <span v-if="user.name">{{ lang.t('name_user') }}{{ user.name }}</span>
      <span v-else>{{ lang.t('name') }}</span>
    </div>
    <t-form ref="form" :data="formData" :rules="formRule" label-width="0" @submit="onSubmit">
      <t-form-item name="number">
          <t-input 
            :ref="el => input.number = el" 
            v-model="formData.number" 
            size="large" 
            placeholder="Number"
            @enter="() => { input.username.focus(); getNumber() }"
          >
          <template #prefix-icon>
            <t-icon name="link-1" />
          </template>
        </t-input>
      </t-form-item>
      <t-form-item name="username">
          <t-input 
            :ref="el => input.username = el" 
            v-model="formData.username" 
            size="large" 
            placeholder="Username"
            @enter="input.password.focus()"
          >
          <template #prefix-icon>
            <t-icon name="user" />
          </template>
        </t-input>
      </t-form-item>

      <t-form-item name="password">
        <t-input
          :ref="el => input.password = el"
          v-model="formData.password"
          size="large"
          type="password"
          clearable
          placeholder="Password"
          :maxlength="6"
          @enter="form.submit()"
          @change="onPasswordChange"
        >
          <template #prefix-icon>
            <t-icon name="lock-on" />
          </template>
        </t-input>
      </t-form-item>
      <t-form-item>
        <t-button size="large" :loading="loading" @click="form.submit()" block>
          {{ lang.t('login.account') }}
        </t-button>
      </t-form-item>
    </t-form>
    <div class="back">
      <t-button size="large" theme="default" variant="base" shape="square" @click="emit('tabs')">
        <template #icon>
          <t-icon name="desktop" size="large" />
        </template>
      </t-button>
    </div>
  </div>
</template>

<script setup>
  import { ref, reactive, nextTick } from 'vue'
  import { useRoute } from 'vue-router'
  import app from '@/app';
  import accountStore from '@/store/account'
  import { number } from '@/api/manage'

  const lang = app.lang.space('page.index')
  const emit = defineEmits(['tabs'])
  const route = useRoute()

  const user = ref({})
  const input = reactive({})
  const loading = ref(false)
  const form = ref(null)
  const formData = ref({})
  const formRule = {
    number: [{ required: true, message: ' ', type: 'error' }],
    username: [{ required: true, message: ' ', type: 'error' }],
    password: [{ required: true, message: ' ', type: 'error' }],
  }

  // 自动登陆 
  const onPasswordChange = (value) => {
    if(value.length == 6) {
      form.value.submit()
    }
  }

  // 登陆 
  const onSubmit = ({ validateResult }) => {
    if (validateResult === true) {
      onLogin()
    }
  }

  // 进入
  const onEnter = () => {
    app.router.push('/account')
  }

  // 登陆
  const onLogin = () => {
    loading.value = true
    accountStore.login(formData.value).then(res => {
      onEnter()
      app.number(formData.value.number)
      app.username(formData.value.username)
    }).catch(err => {
      app.message('error', 'message.error.' + err.message)
    }).finally(() => {
      loading.value = false
    })
  }

  // 检测number
  const getNumber = () => {
    number(formData.value.number).then(res => {
      // 公司信息
      user.value = res
    })
  }

  // 自动登陆
  const autoLogin = async () => {
    // 载入缓存
    const number = route.query.number ?? app.number()
    if(number) {
      formData.value.number = number
      getNumber()
    }

    // 判断是否有帐号
    const username = route.query.username ?? app.username()
    if(username) {
      formData.value.username = username
    }

    // 是否有密码
    if(route.query.password) {
      formData.value.password = route.query.password
      // 自动登陆
      if(formData.value.username && formData.value.number) {
        onLogin()
      }
    }

    // 输入框焦点
    if(!formData.value.number) {
      return input.number.focus()
    }
    if(!formData.value.username) {
      return input.username.focus()
    }
    if(!formData.value.password) {
      return input.password.focus()
    }
  }

  nextTick(() => {
    autoLogin()
  })
</script>